import React, { FC } from 'react'
import {
  ProgressProps,
  DISPLAY_NAME_PROGRESS,
  getProgressClassNames,
} from './config'

export const Progress: FC<ProgressProps> = props => {
  const { percent, strokeHeight, showText, styles, theme } = props
  const progressClasses = getProgressClassNames(props)

  return (
    <div className={progressClasses} style={styles}>
      <div
        className="progress-bar-outer"
        style={{ height: `${strokeHeight}px` }}>
        <div
          className={`progress-bar-inner color-${theme}`}
          style={{ width: `${percent}%` }}>
          {showText && <span className="inner-text">{`${percent}%`}</span>}
        </div>
      </div>
    </div>
  )
}

Progress.displayName = DISPLAY_NAME_PROGRESS
Progress.defaultProps = {
  strokeHeight: 15,
  showText: true,
  theme: 'primary',
}

export default Progress
